<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import SectionTitle from "../common/SectionTitle.vue";

const form = reactive({
  name: "",
  phone: "",
  email: "",
  message: "",
});

const submitForm = () => {
  if (!form.name || !form.phone || !form.email || !form.message) {
    ElMessage({
      message: "请填写完整表单信息",
      type: "warning",
    });
    return;
  }

  // 模拟提交成功
  ElMessage({
    message: "提交成功，我们会尽快与您联系",
    type: "success",
  });

  // 清空表单
  form.name = "";
  form.phone = "";
  form.email = "";
  form.message = "";
};
</script>

<template>
  <section class="section contact-section" id="contact">
    <div class="section-container">
      <SectionTitle title="联系我们" />
      <el-row :gutter="40">
        <el-col :xs="24" :sm="24" :md="12">
          <div class="contact-info">
            <h3>联系方式</h3>
            <p><strong>地址：</strong>中国某省某市某区科技园区创新路88号</p>
            <p><strong>电话：</strong>400-123-4567</p>
            <p><strong>邮箱：</strong>info@yuanshi-tech.com</p>
            <p><strong>工作时间：</strong>周一至周五 9:00-18:00</p>
            <div class="contact-map">
              <img
                src="https://via.placeholder.com/600x300?text=公司地图位置"
                alt="公司地图"
                class="map-image"
              />
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12">
          <div class="contact-form">
            <h3>留言咨询</h3>
            <form @submit.prevent="submitForm">
              <div class="form-group">
                <label>姓名</label>
                <el-input v-model="form.name" placeholder="请输入您的姓名" />
              </div>
              <div class="form-group">
                <label>电话</label>
                <el-input
                  v-model="form.phone"
                  placeholder="请输入您的联系电话"
                />
              </div>
              <div class="form-group">
                <label>邮箱</label>
                <el-input
                  v-model="form.email"
                  placeholder="请输入您的邮箱地址"
                />
              </div>
              <div class="form-group">
                <label>留言内容</label>
                <el-input
                  v-model="form.message"
                  type="textarea"
                  :rows="5"
                  placeholder="请输入您的留言内容"
                />
              </div>
              <el-button type="primary" native-type="submit" class="submit-btn"
                >提交留言</el-button
              >
            </form>
          </div>
        </el-col>
      </el-row>
    </div>
  </section>
</template>

<style scoped>
.section {
  padding: var(--section-padding);
}

.contact-section {
  background-color: var(--secondary-color);
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.contact-info {
  padding: 20px;
}

.contact-info h3,
.contact-form h3 {
  margin-bottom: 20px;
  color: var(--primary-color);
  font-size: 22px;
}

.contact-info p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.contact-map {
  margin-top: 30px;
}

.map-image {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.contact-form {
  background-color: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.submit-btn {
  width: 100%;
}

@media (max-width: 992px) {
  .contact-info,
  .contact-form {
    margin-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 60px 0;
  }

  .contact-info h3,
  .contact-form h3 {
    font-size: 20px;
  }

  .contact-form {
    padding: 20px;
  }
}

@media (max-width: 576px) {
  .section {
    padding: 40px 0;
  }

  .contact-info h3,
  .contact-form h3 {
    font-size: 18px;
  }
}
</style> 